<template><div><h2 id="数据统计卡片" tabindex="-1"><a class="header-anchor" href="#数据统计卡片"><span>数据统计卡片</span></a></h2>
<p><code v-pre>Dcat Admin</code>中内置了多种常用数据统计卡片，可以非常方便的与后端API交互，下面逐一介绍用法。</p>
<h2 id="基础卡片" tabindex="-1"><a class="header-anchor" href="#基础卡片"><span>基础卡片</span></a></h2>
<p>基础卡片(<code v-pre>Dcat\Admin\Widgets\Metrics\Card</code>)是一种默认不显示图表的卡片，也是数据卡片中最简单的一种。</p>
<p><img src="@source/dcat-admin-2x/assets/images/b47171ec-fd2e-4997-9240-b447aaf77c89-W0HClkvJS5.png" alt=""></p>
<h3 id="简单示例" tabindex="-1"><a class="header-anchor" href="#简单示例"><span>简单示例</span></a></h3>
<p>基础卡片的使用可参考内置的<code v-pre>App\Admin\Metrics\Examples\TotalUsers</code>类。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Metrics<span class="token punctuation">\</span>Examples</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Widgets<span class="token punctuation">\</span>Metrics<span class="token punctuation">\</span>Card</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Contracts<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Renderable</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Request</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">TotalUsers</span> <span class="token keyword">extends</span> <span class="token class-name">Card</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 卡片底部内容.</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@var</span> <span class="token class-name"><span class="token keyword">string</span><span class="token punctuation">|</span>Renderable<span class="token punctuation">|</span><span class="token punctuation">\</span>Closure</span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token variable">$footer</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 保存自定义参数</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token variable">$data</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 构造方法参数必须设置默认值</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">__construct</span><span class="token punctuation">(</span><span class="token keyword type-hint">array</span> <span class="token variable">$data</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> </span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">data</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">__construct</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 设置标题</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Total Users'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token comment">// 设置下拉菜单</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">dropdown</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">            <span class="token string single-quoted-string">'7'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Last 7 Days'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'28'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Last 28 Days'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'30'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Last Month'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'365'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Last Year'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 处理请求.</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@param</span> <span class="token class-name">Request</span> <span class="token parameter">$request</span></span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">void</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">handle</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Request</span> <span class="token variable">$request</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 获取外部传递的自定义参数</span></span>
<span class="line">        <span class="token variable">$key1</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'key1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">switch</span> <span class="token punctuation">(</span><span class="token variable">$request</span><span class="token operator">-></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'option'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token keyword">case</span> <span class="token string single-quoted-string">'365'</span><span class="token punctuation">:</span></span>
<span class="line">                <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">content</span><span class="token punctuation">(</span><span class="token function">mt_rand</span><span class="token punctuation">(</span><span class="token number">600</span><span class="token punctuation">,</span> <span class="token number">1500</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">down</span><span class="token punctuation">(</span><span class="token function">mt_rand</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token keyword">break</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token keyword">case</span> <span class="token string single-quoted-string">'30'</span><span class="token punctuation">:</span></span>
<span class="line">                <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">content</span><span class="token punctuation">(</span><span class="token function">mt_rand</span><span class="token punctuation">(</span><span class="token number">170</span><span class="token punctuation">,</span> <span class="token number">250</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">up</span><span class="token punctuation">(</span><span class="token function">mt_rand</span><span class="token punctuation">(</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token keyword">break</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token keyword">case</span> <span class="token string single-quoted-string">'28'</span><span class="token punctuation">:</span></span>
<span class="line">                <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">content</span><span class="token punctuation">(</span><span class="token function">mt_rand</span><span class="token punctuation">(</span><span class="token number">155</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">up</span><span class="token punctuation">(</span><span class="token function">mt_rand</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token keyword">break</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token keyword">case</span> <span class="token string single-quoted-string">'7'</span><span class="token punctuation">:</span></span>
<span class="line">            <span class="token keyword">default</span><span class="token punctuation">:</span></span>
<span class="line">                <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">content</span><span class="token punctuation">(</span><span class="token number">143</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">up</span><span class="token punctuation">(</span><span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 传递自定义参数到 handle 方法</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">parameters</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword return-type">array</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">data</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * <span class="token keyword">@param</span> <span class="token class-name"><span class="token keyword">int</span></span> <span class="token parameter">$percent</span></span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> $this</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">up</span><span class="token punctuation">(</span><span class="token variable">$percent</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">footer</span><span class="token punctuation">(</span></span>
<span class="line">            <span class="token string double-quoted-string">"&lt;i class=\"feather icon-trending-up text-success\">&lt;/i> <span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$percent</span><span class="token punctuation">}</span></span>% Increase"</span></span>
<span class="line">        <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * <span class="token keyword">@param</span> <span class="token class-name"><span class="token keyword">int</span></span> <span class="token parameter">$percent</span></span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> $this</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">down</span><span class="token punctuation">(</span><span class="token variable">$percent</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">footer</span><span class="token punctuation">(</span></span>
<span class="line">            <span class="token string double-quoted-string">"&lt;i class=\"feather icon-trending-down text-danger\">&lt;/i> <span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$percent</span><span class="token punctuation">}</span></span>% Decrease"</span></span>
<span class="line">        <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 设置卡片底部内容</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@param</span> <span class="token class-name"><span class="token keyword">string</span><span class="token punctuation">|</span>Renderable<span class="token punctuation">|</span><span class="token punctuation">\</span>Closure</span> <span class="token parameter">$footer</span></span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> $this</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">footer</span><span class="token punctuation">(</span><span class="token variable">$footer</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">footer</span> <span class="token operator">=</span> <span class="token variable">$footer</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 渲染卡片内容.</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">string</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">renderContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$content</span> <span class="token operator">=</span> <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">renderContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token string heredoc-string"><span class="token delimiter symbol"><span class="token punctuation">&lt;&lt;&lt;</span>HTML</span></span>
<span class="line">&lt;div class="d-flex justify-content-between align-items-center mt-1" style="margin-bottom: 2px"></span>
<span class="line">    &lt;h2 class="ml-1 font-large-1"><span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$content</span><span class="token punctuation">}</span></span>&lt;/h2></span>
<span class="line">&lt;/div></span>
<span class="line">&lt;div class="ml-1 mt-1 font-weight-bold text-80"></span>
<span class="line">    <span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">renderFooter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span></span>
<span class="line">&lt;/div></span>
<span class="line"><span class="token delimiter symbol">HTML<span class="token punctuation">;</span></span></span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">string</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">renderFooter</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token property">footer</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="基础卡片方法" tabindex="-1"><a class="header-anchor" href="#基础卡片方法"><span>基础卡片方法</span></a></h3>
<h4 id="初始化-init" tabindex="-1"><a class="header-anchor" href="#初始化-init"><span>初始化 (init)</span></a></h4>
<p><code v-pre>init</code>方法会在卡片构造方法中被调用，可用于卡片初始化操作。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyCard</span> extend Card</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 你的初始化操作</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置标题-title" tabindex="-1"><a class="header-anchor" href="#设置标题-title"><span>设置标题 (title)</span></a></h4>
<p>通过<code v-pre>title</code>方法可以在卡片的左上角设置一个标题</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyCard</span> extend Card</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'活跃用户'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置下拉菜单-dropdown" tabindex="-1"><a class="header-anchor" href="#设置下拉菜单-dropdown"><span>设置下拉菜单 (dropdown)</span></a></h4>
<p>通过<code v-pre>dropdown</code>方法可以在卡片右上角设置一个下拉菜单按钮，此功能需要结合<code v-pre>handle</code>方法一起使用才有效果。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyCard</span> extend Card</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">dropdown</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">            <span class="token string single-quoted-string">'7'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Last 7 Days'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'28'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Last 28 Days'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'30'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Last Month'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'365'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Last Year'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置副标题-subtitle" tabindex="-1"><a class="header-anchor" href="#设置副标题-subtitle"><span>设置副标题 (subTitle)</span></a></h4>
<p>通过<code v-pre>subTitle</code>方法可以在卡片的又上角设置一个副标题。</p>
<blockquote>
<p>此方法与<code v-pre>dropdown</code>方法会有冲突，如果设置过下拉菜单按钮，就不需要设置副标题。</p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyCard</span> extend Card</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">subTitle</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'最近30天'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置头部内容-header" tabindex="-1"><a class="header-anchor" href="#设置头部内容-header"><span>设置头部内容 (header)</span></a></h4>
<p>通过<code v-pre>header</code>方法可以设置卡片头部内容，此方法接受一个参数，可以是<code v-pre>string</code>、<code v-pre>Closure</code>，也可以是模板视图(<code v-pre>Illuminate\Contracts\Support\Renderable</code>)。</p>
<blockquote>
<p>通过此方法设置的内容与<code v-pre>title</code>在同一个<code v-pre>div</code>容器内。</p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyCard</span> extend Card</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">header</span><span class="token punctuation">(</span></span>
<span class="line">            <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">HTML</span></span>
<span class="line">            <span class="token operator">&lt;</span>div<span class="token operator">></span>头部内容<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>        </span>
<span class="line"><span class="token constant">HTML</span>            </span>
<span class="line">        <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 也可以传闭包</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">header</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token keyword">return</span> <span class="token operator">...</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 也可以传视图</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">header</span><span class="token punctuation">(</span><span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'...'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置主体内容-content" tabindex="-1"><a class="header-anchor" href="#设置主体内容-content"><span>设置主体内容 (content)</span></a></h4>
<p>通过<code v-pre>content</code>方法可以设置卡片的内容主体，此方法接受一个参数，可以是<code v-pre>string</code>、<code v-pre>Closure</code>，也可以是模板视图(<code v-pre>Illuminate\Contracts\Support\Renderable</code>)。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyCard</span> extend Card</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">withContent</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'自定义内容'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 卡片内容</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@param</span> <span class="token class-name"><span class="token keyword">string</span></span> <span class="token parameter">$content</span></span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> $this</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">withContent</span><span class="token punctuation">(</span><span class="token variable">$content</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">content</span><span class="token punctuation">(</span></span>
<span class="line">            <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">HTML</span></span>
<span class="line"><span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"d-flex flex-column flex-wrap text-center"</span><span class="token operator">></span></span>
<span class="line">    <span class="token operator">&lt;</span>h1 <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"font-large-2 mt-2 mb-0"</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token variable">$content</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">></span></span>
<span class="line">    <span class="token operator">&lt;</span>small<span class="token operator">></span>Tickets<span class="token operator">&lt;</span><span class="token operator">/</span>small<span class="token operator">></span></span>
<span class="line"><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"><span class="token constant">HTML</span></span>
<span class="line">        <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置高度-height" tabindex="-1"><a class="header-anchor" href="#设置高度-height"><span>设置高度 (height)</span></a></h4>
<p>通过<code v-pre>height</code>方法可以设置卡片的最小高度，默认<code v-pre>165</code>。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">height</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="传递自定义参数-parameters" tabindex="-1"><a class="header-anchor" href="#传递自定义参数-parameters"><span>传递自定义参数 (parameters)</span></a></h4>
<p>通过 <code v-pre>parameters</code> 方法可以把参数传递到 <code v-pre>handle</code> 方法</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 传递自定义参数到 handle 方法</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">parameters</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword return-type">array</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token string single-quoted-string">'key1'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'value1'</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">        <span class="token operator">...</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>获取自定义参数</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">handle</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Request</span> <span class="token variable">$request</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 获取自定义参数</span></span>
<span class="line">    <span class="token variable">$key1</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'key1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="渲染内容-rendercontent" tabindex="-1"><a class="header-anchor" href="#渲染内容-rendercontent"><span>渲染内容 (renderContent)</span></a></h4>
<p>为了保证内容的灵活和可扩展性，系统没有对卡片内容预设任何样式(即设置什么内容就只显示什么内容，没有预设布局或其他样式)，<br>
通过<code v-pre>renderContent</code>方法即可以更改卡片默认的渲染方式。</p>
<p>以下的例子演示了<code v-pre>renderContent</code>方法的主要功能</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Helper</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyCard</span> extend Card</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token variable">$footer</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 设置卡片内容</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">content</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token comment">// 设置卡片底部内容</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">footer</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 增加此方法设置卡片底部内容</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> $this</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">footer</span><span class="token punctuation">(</span><span class="token variable">$footer</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">footer</span> <span class="token operator">=</span> <span class="token variable">$footer</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 渲染底部内容</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> $this</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">renderFooter</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token class-name static-context">Helper</span><span class="token operator">::</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token property">footer</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 渲染卡片内容</span>
<span class="line">     * 在这里即可加上卡片底部内容</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">string</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">renderContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$content</span> <span class="token operator">=</span> <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">renderContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$footer</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">renderFooter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token string heredoc-string"><span class="token delimiter symbol"><span class="token punctuation">&lt;&lt;&lt;</span>HTML</span></span>
<span class="line">&lt;div class="card-content"></span>
<span class="line">    &lt;div class="row"></span>
<span class="line">        <span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$content</span><span class="token punctuation">}</span></span></span>
<span class="line">    &lt;/div></span>
<span class="line">    &lt;div class="metric-footer"></span>
<span class="line">        <span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$footer</span><span class="token punctuation">}</span></span></span>
<span class="line">    &lt;/div></span>
<span class="line">&lt;/div></span>
<span class="line"><span class="token delimiter symbol">HTML<span class="token punctuation">;</span></span></span>      </span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="启用以及渲染图表" tabindex="-1"><a class="header-anchor" href="#启用以及渲染图表"><span>启用以及渲染图表</span></a></h4>
<p>基本卡片默认是启用图表功能的，通过<code v-pre>useChart</code>方法可以启用图表功能，调用此方法之后会实例化一个图表类，然后保存在<code v-pre>chart</code>属性当中。</p>
<p>当图表启用之后，还需要在你的卡片内容中渲染图表，否则图表虽然被初始化了，但是仍无法显示。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyCard</span> extend Card</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 启用图表</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">useChart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 渲染卡片内容</span>
<span class="line">     * 需要在这里加上渲染图表的代码</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">string</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">renderContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 通过 content 方法设置的内容</span></span>
<span class="line">        <span class="token variable">$content</span> <span class="token operator">=</span> <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">renderContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 渲染图表</span></span>
<span class="line">        <span class="token variable">$chart</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">renderChart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">HTML</span></span>
<span class="line">    <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"my-chart"</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token variable">$chart</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line">    <span class="token punctuation">{</span><span class="token variable">$content</span><span class="token punctuation">}</span>    </span>
<span class="line"><span class="token constant">HTML</span>           </span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="图表默认配置-defaultchartoptions" tabindex="-1"><a class="header-anchor" href="#图表默认配置-defaultchartoptions"><span>图表默认配置 (defaultChartOptions)</span></a></h4>
<p>通过<code v-pre>defaultChartOptions</code>方法可以设置图表默认配置，此方法只有启用图表之后才有效。</p>
<blockquote>
<p>这里的图表配置同样支持设置可执行<code v-pre>JS</code>代码，详细用法请参考<a href="https://learnku.com/docs/dcat-admin/2.x/chart/8129#57124c" target="_blank" rel="noopener noreferrer">图表配置设置可执行JS代码</a>。</p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyCard</span> extend Card</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">defaultChartOptions</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 返回图表的配置</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token punctuation">[</span></span>
<span class="line">            <span class="token operator">...</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置图表-chart" tabindex="-1"><a class="header-anchor" href="#设置图表-chart"><span>设置图表 (chart)</span></a></h4>
<p>通过<code v-pre>chart</code>方法可以设置图表配置。</p>
<blockquote>
<p>这里的图表配置同样支持设置可执行<code v-pre>JS</code>代码，详细用法请参考<a href="https://learnku.com/docs/dcat-admin/2.x/data-statistics-card/widgets-charts.md#js" target="_blank" rel="noopener noreferrer">图表配置设置可执行JS代码</a>。</p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyCard</span> extend Card</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">chart</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置图表配置-chartoption" tabindex="-1"><a class="header-anchor" href="#设置图表配置-chartoption"><span>设置图表配置 (chartOption)</span></a></h4>
<p>通过<code v-pre>chartOption</code>方法可以设置图表配置，此方法一次只能设置一个参数，支持设置多维参数。</p>
<blockquote>
<p>这里的图表配置同样支持设置可执行<code v-pre>JS</code>代码，详细用法请参考<a href="https://learnku.com/docs/dcat-admin/2.x/data-statistics-card/widgets-charts.md#js" target="_blank" rel="noopener noreferrer">图表配置设置可执行JS代码</a>。</p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyCard</span> extend Card</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">chartOption</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'stroke.curve'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'smooth'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">chartOption</span><span class="token punctuation">(</span></span>
<span class="line">            <span class="token string single-quoted-string">'plotOptions.radialBar.dataLabels.total.formatter'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token comment">// 这个值最后段代码会作为JS代码执行</span></span>
<span class="line">            <span class="token class-name static-context">JavaScript</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token string double-quoted-string">"function () { return <span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$number</span><span class="token punctuation">}</span></span>; }"</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置图表高度-chartheight" tabindex="-1"><a class="header-anchor" href="#设置图表高度-chartheight"><span>设置图表高度 (chartHeight)</span></a></h4>
<p>通过<code v-pre>chartHeight</code>方法可以设置图表的高度，这个方法非常重要，经常需要结合<code v-pre>height</code>方法一起使用，调整卡片的整体高度。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyCard</span> extend Card</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">chartHeight</span><span class="token punctuation">(</span><span class="token number">150</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置图表上间距-chartmargintop" tabindex="-1"><a class="header-anchor" href="#设置图表上间距-chartmargintop"><span>设置图表上间距 (chartMarginTop)</span></a></h4>
<p>通过<code v-pre>chartMarginTop</code>方法可以设置图表与上级元素的间距，此方法接受一个<code v-pre>int</code>类型参数，可以传<code v-pre>负数</code>。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyCard</span> extend Card</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">chartMarginTop</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置图表下间距-chartmarginbottom" tabindex="-1"><a class="header-anchor" href="#设置图表下间距-chartmarginbottom"><span>设置图表下间距 (chartMarginBottom)</span></a></h4>
<p>通过<code v-pre>chartMarginBottom</code>方法可以设置图表与下级元素的间距，此方法接受一个<code v-pre>int</code>类型参数，可以传<code v-pre>负数</code>。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyCard</span> extend Card</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">chartMarginBottom</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置图表标签-chartlabels" tabindex="-1"><a class="header-anchor" href="#设置图表标签-chartlabels"><span>设置图表标签 (chartLabels)</span></a></h4>
<p>通过<code v-pre>chartLabels</code>方法可以设置图表的标签(<code v-pre>labels</code>)配置。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyCard</span> extend Card</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">chartLabels</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'标签1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 也可以传递数组</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">chartLabels</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'标签1'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置图表颜色-chartcolors" tabindex="-1"><a class="header-anchor" href="#设置图表颜色-chartcolors"><span>设置图表颜色 (chartColors)</span></a></h4>
<p>通过<code v-pre>chartLabels</code>方法可以设置图表的颜色(<code v-pre>colors</code>)配置。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyCard</span> extend Card</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">chartColors</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'#4f41a1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 也可以传递数组</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">chartColors</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'#4f41a1'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="渲染图表-renderchart" tabindex="-1"><a class="header-anchor" href="#渲染图表-renderchart"><span>渲染图表 (renderChart)</span></a></h4>
<p>通过<code v-pre>renderChart</code>方法可以渲染图表。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyCard</span> extend Card</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 启用图表</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">useChart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 渲染卡片内容</span>
<span class="line">     * 需要在这里加上渲染图表的代码</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">string</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">renderContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 通过 content 方法设置的内容</span></span>
<span class="line">        <span class="token variable">$content</span> <span class="token operator">=</span> <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">renderContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 渲染图表</span></span>
<span class="line">        <span class="token variable">$chart</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">renderChart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">HTML</span></span>
<span class="line">    <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"my-chart"</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token variable">$chart</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line">    <span class="token punctuation">{</span><span class="token variable">$content</span><span class="token punctuation">}</span>    </span>
<span class="line"><span class="token constant">HTML</span>           </span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="线性趋势图卡片-line" tabindex="-1"><a class="header-anchor" href="#线性趋势图卡片-line"><span>线性趋势图卡片 (Line)</span></a></h2>
<p>线性趋势图卡片(<code v-pre>Dcat\Admin\Widgets\Metrics\Line</code>)是一个附带了折线\曲线图的数据统计卡片，继承自基础卡片<code v-pre>Dcat\Admin\Widgets\Metrics\Card</code>。</p>
<p><a href="..%5Cassets%5Cimages%5Cc970b6a0-4843-40cd-afe5-bc1c645ea836-card-line.png"><img src="@source/dcat-admin-2x/assets/images/c970b6a0-4843-40cd-afe5-bc1c645ea836-card-line.png" alt="card-line.png"></a></p>
<h3 id="示例" tabindex="-1"><a class="header-anchor" href="#示例"><span>示例</span></a></h3>
<p>可参考内置的<code v-pre>App\Admin\Metrics\Examples\NewUsers</code>类。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Metrics<span class="token punctuation">\</span>Examples</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Widgets<span class="token punctuation">\</span>Metrics<span class="token punctuation">\</span>Line</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Request</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">NewUsers</span> <span class="token keyword">extends</span> <span class="token class-name">Line</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * <span class="token keyword">@var</span> <span class="token class-name"><span class="token keyword">string</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token variable">$label</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'New Users'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 初始化卡片内容</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">void</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token property">label</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">dropdown</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">            <span class="token string single-quoted-string">'7'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Last 7 Days'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'28'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Last 28 Days'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'30'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Last Month'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'365'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Last Year'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 处理请求</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@param</span> <span class="token class-name">Request</span> <span class="token parameter">$request</span></span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">mixed</span><span class="token punctuation">|</span><span class="token keyword">void</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">handle</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Request</span> <span class="token variable">$request</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$generator</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$len</span><span class="token punctuation">,</span> <span class="token variable">$min</span> <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token variable">$max</span> <span class="token operator">=</span> <span class="token number">300</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token variable">$i</span> <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token variable">$i</span> <span class="token operator">&lt;=</span> <span class="token variable">$len</span><span class="token punctuation">;</span> <span class="token variable">$i</span><span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token keyword">yield</span> <span class="token function">mt_rand</span><span class="token punctuation">(</span><span class="token variable">$min</span><span class="token punctuation">,</span> <span class="token variable">$max</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">switch</span> <span class="token punctuation">(</span><span class="token variable">$request</span><span class="token operator">-></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'option'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token keyword">case</span> <span class="token string single-quoted-string">'365'</span><span class="token punctuation">:</span></span>
<span class="line">                <span class="token comment">// 卡片内容</span></span>
<span class="line">                <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">withContent</span><span class="token punctuation">(</span><span class="token function">mt_rand</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">,</span> <span class="token number">5000</span><span class="token punctuation">)</span><span class="token operator">.</span><span class="token string single-quoted-string">'k'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token comment">// 图表数据</span></span>
<span class="line">                <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">withChart</span><span class="token punctuation">(</span><span class="token function">collect</span><span class="token punctuation">(</span><span class="token variable">$generator</span><span class="token punctuation">(</span><span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">toArray</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token comment">// 直线</span></span>
<span class="line">                <span class="token keyword">break</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token keyword">case</span> <span class="token string single-quoted-string">'30'</span><span class="token punctuation">:</span></span>
<span class="line">                <span class="token comment">// 卡片内容</span></span>
<span class="line">                <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">withContent</span><span class="token punctuation">(</span><span class="token function">mt_rand</span><span class="token punctuation">(</span><span class="token number">400</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token operator">.</span><span class="token string single-quoted-string">'k'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token comment">// 图表数据</span></span>
<span class="line">                <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">withChart</span><span class="token punctuation">(</span><span class="token function">collect</span><span class="token punctuation">(</span><span class="token variable">$generator</span><span class="token punctuation">(</span><span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">toArray</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token comment">// 直线</span></span>
<span class="line">                <span class="token keyword">break</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token keyword">case</span> <span class="token string single-quoted-string">'28'</span><span class="token punctuation">:</span></span>
<span class="line">                <span class="token comment">// 卡片内容</span></span>
<span class="line">                <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">withContent</span><span class="token punctuation">(</span><span class="token function">mt_rand</span><span class="token punctuation">(</span><span class="token number">400</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token operator">.</span><span class="token string single-quoted-string">'k'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token comment">// 图表数据</span></span>
<span class="line">                <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">withChart</span><span class="token punctuation">(</span><span class="token function">collect</span><span class="token punctuation">(</span><span class="token variable">$generator</span><span class="token punctuation">(</span><span class="token number">28</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">toArray</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token comment">// 直线</span></span>
<span class="line">                <span class="token keyword">break</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token keyword">case</span> <span class="token string single-quoted-string">'7'</span><span class="token punctuation">:</span></span>
<span class="line">            <span class="token keyword">default</span><span class="token punctuation">:</span></span>
<span class="line">                <span class="token comment">// 卡片内容</span></span>
<span class="line">                <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">withContent</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'89.2k'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token comment">// 图表数据</span></span>
<span class="line">                <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">withChart</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token number">52</span><span class="token punctuation">,</span> <span class="token number">38</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">,</span> <span class="token number">55</span><span class="token punctuation">,</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 设置图表数据.</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@param</span> <span class="token class-name"><span class="token keyword">array</span></span> <span class="token parameter">$data</span></span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> $this</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">withChart</span><span class="token punctuation">(</span><span class="token keyword type-hint">array</span> <span class="token variable">$data</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">chart</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">            <span class="token string single-quoted-string">'series'</span> <span class="token operator">=></span> <span class="token punctuation">[</span></span>
<span class="line">                <span class="token punctuation">[</span></span>
<span class="line">                    <span class="token string single-quoted-string">'name'</span> <span class="token operator">=></span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">label</span><span class="token punctuation">,</span></span>
<span class="line">                    <span class="token string single-quoted-string">'data'</span> <span class="token operator">=></span> <span class="token variable">$data</span><span class="token punctuation">,</span></span>
<span class="line">                <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 设置卡片内容.</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@param</span> <span class="token class-name"><span class="token keyword">string</span></span> <span class="token parameter">$content</span></span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> $this</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">withContent</span><span class="token punctuation">(</span><span class="token variable">$content</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">content</span><span class="token punctuation">(</span></span>
<span class="line">            <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">HTML</span></span>
<span class="line"><span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"d-flex justify-content-between align-items-center mt-1"</span> style<span class="token operator">=</span><span class="token string double-quoted-string">"margin-bottom: 2px"</span><span class="token operator">></span></span>
<span class="line">    <span class="token operator">&lt;</span>h2 <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"ml-1 font-large-1"</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token variable">$content</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>h2<span class="token operator">></span></span>
<span class="line">    <span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"mb-0 mr-1 text-80"</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token property">label</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span></span>
<span class="line"><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"><span class="token constant">HTML</span></span>
<span class="line">        <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="方法" tabindex="-1"><a class="header-anchor" href="#方法"><span>方法</span></a></h3>
<h4 id="设置线条为直线-chartstraight" tabindex="-1"><a class="header-anchor" href="#设置线条为直线-chartstraight"><span>设置线条为直线 (chartStraight)</span></a></h4>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Widgets<span class="token punctuation">\</span>Metrics<span class="token punctuation">\</span>Line</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyCard</span> extend Line</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">chartStraight</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置线条为曲线-chartsmooth" tabindex="-1"><a class="header-anchor" href="#设置线条为曲线-chartsmooth"><span>设置线条为曲线 (chartSmooth)</span></a></h4>
<p>默认显示的是曲线。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Widgets<span class="token punctuation">\</span>Metrics<span class="token punctuation">\</span>Line</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyCard</span> extend Line</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">chartSmooth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="圆环图卡片-donut" tabindex="-1"><a class="header-anchor" href="#圆环图卡片-donut"><span>圆环图卡片 (Donut)</span></a></h2>
<p>圆环图卡片(<code v-pre>Dcat\Admin\Widgets\Metrics\Donut</code>)是一个附带了圆环图的数据统计卡片，继承自基础卡片<code v-pre>Dcat\Admin\Widgets\Metrics\Card</code>。</p>
<p><img src="@source/dcat-admin-2x/assets/images/1d1b27bf-ab07-4329-a16b-1fdf52c507f6-oSafBBziNv.png" alt=""></p>
<h3 id="示例-1" tabindex="-1"><a class="header-anchor" href="#示例-1"><span>示例</span></a></h3>
<p>可参考内置的<code v-pre>App\Admin\Metrics\Examples\NewDevices</code>类。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Metrics<span class="token punctuation">\</span>Examples</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Admin</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Widgets<span class="token punctuation">\</span>Metrics<span class="token punctuation">\</span>Donut</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">NewDevices</span> <span class="token keyword">extends</span> <span class="token class-name">Donut</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token variable">$labels</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'Desktop'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Mobile'</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 初始化卡片内容</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$color</span> <span class="token operator">=</span> <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">color</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$colors</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token variable">$color</span><span class="token operator">-></span><span class="token function">primary</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token variable">$color</span><span class="token operator">-></span><span class="token function">alpha</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'blue2'</span><span class="token punctuation">,</span> <span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'New Devices'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">subTitle</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Last 30 days'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">chartLabels</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token property">labels</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token comment">// 设置图表颜色</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">chartColors</span><span class="token punctuation">(</span><span class="token variable">$colors</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 渲染模板</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">string</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 写入数据.</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">void</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">fill</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">withContent</span><span class="token punctuation">(</span><span class="token number">44.9</span><span class="token punctuation">,</span> <span class="token number">28.6</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 图表数据</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">withChart</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">44.9</span><span class="token punctuation">,</span> <span class="token number">28.6</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 设置图表数据.</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@param</span> <span class="token class-name"><span class="token keyword">array</span></span> <span class="token parameter">$data</span></span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> $this</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">withChart</span><span class="token punctuation">(</span><span class="token keyword type-hint">array</span> <span class="token variable">$data</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">chart</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">            <span class="token string single-quoted-string">'series'</span> <span class="token operator">=></span> <span class="token variable">$data</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 设置卡片头部内容.</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@param</span> <span class="token class-name"><span class="token keyword">mixed</span></span> <span class="token parameter">$desktop</span></span>
<span class="line">     * <span class="token keyword">@param</span> <span class="token class-name"><span class="token keyword">mixed</span></span> <span class="token parameter">$mobile</span></span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> $this</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">withContent</span><span class="token punctuation">(</span><span class="token variable">$desktop</span><span class="token punctuation">,</span> <span class="token variable">$mobile</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$blue</span> <span class="token operator">=</span> <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">color</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">alpha</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'blue2'</span><span class="token punctuation">,</span> <span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$style</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'margin-bottom: 8px'</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$labelWidth</span> <span class="token operator">=</span> <span class="token number">120</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">content</span><span class="token punctuation">(</span></span>
<span class="line">            <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">HTML</span></span>
<span class="line"><span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"d-flex pl-1 pr-1 pt-1"</span> style<span class="token operator">=</span><span class="token string double-quoted-string">"<span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$style</span><span class="token punctuation">}</span></span>"</span><span class="token operator">></span></span>
<span class="line">    <span class="token operator">&lt;</span>div style<span class="token operator">=</span><span class="token string double-quoted-string">"width: <span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$labelWidth</span><span class="token punctuation">}</span></span>px"</span><span class="token operator">></span></span>
<span class="line">        <span class="token operator">&lt;</span>i <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"fa fa-circle text-primary"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>i<span class="token operator">></span> <span class="token punctuation">{</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token property">labels</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
<span class="line">    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line">    <span class="token operator">&lt;</span>div<span class="token operator">></span><span class="token punctuation">{</span><span class="token variable">$desktop</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"><span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"d-flex pl-1 pr-1"</span> style<span class="token operator">=</span><span class="token string double-quoted-string">"<span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$style</span><span class="token punctuation">}</span></span>"</span><span class="token operator">></span></span>
<span class="line">    <span class="token operator">&lt;</span>div style<span class="token operator">=</span><span class="token string double-quoted-string">"width: <span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$labelWidth</span><span class="token punctuation">}</span></span>px"</span><span class="token operator">></span></span>
<span class="line">        <span class="token operator">&lt;</span>i <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"fa fa-circle"</span> style<span class="token operator">=</span><span class="token string double-quoted-string">"color: <span class="token interpolation"><span class="token variable">$blue</span></span>"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>i<span class="token operator">></span> <span class="token punctuation">{</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token property">labels</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
<span class="line">    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line">    <span class="token operator">&lt;</span>div<span class="token operator">></span><span class="token punctuation">{</span><span class="token variable">$mobile</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"><span class="token constant">HTML</span></span>
<span class="line">        <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="方法-1" tabindex="-1"><a class="header-anchor" href="#方法-1"><span>方法</span></a></h3>
<h4 id="设置内容宽度-contentwidth" tabindex="-1"><a class="header-anchor" href="#设置内容宽度-contentwidth"><span>设置内容宽度 (contentWidth)</span></a></h4>
<p>通过<code v-pre>contentWidth</code>方法可以设置文本内容以及图表内容的宽度，默认为<code v-pre>[6, 6]</code>。</p>
<blockquote>
<p>{tip} 这里的宽度是一个<code v-pre>1-12</code>之间的一个值。</p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Widgets<span class="token punctuation">\</span>Metrics<span class="token punctuation">\</span>Line</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyCard</span> extend Line</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">contentWidth</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="柱状图卡片-bar" tabindex="-1"><a class="header-anchor" href="#柱状图卡片-bar"><span>柱状图卡片 (Bar)</span></a></h2>
<p>柱状图卡片(<code v-pre>Dcat\Admin\Widgets\Metrics\Bar</code>)是一个附带了柱状图的数据统计卡片，继承自基础卡片<code v-pre>Dcat\Admin\Widgets\Metrics\Card</code>。</p>
<p><img src="@source/dcat-admin-2x/assets/images/366400fa-ffc3-4f6c-a238-f8f448a50a55-2bKpvXK7V6.png" alt=""></p>
<h3 id="示例-2" tabindex="-1"><a class="header-anchor" href="#示例-2"><span>示例</span></a></h3>
<p>可参考内置的<code v-pre>App\Admin\Metrics\Examples\NewDevices</code>类。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Metrics<span class="token punctuation">\</span>Examples</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Admin</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Widgets<span class="token punctuation">\</span>Metrics<span class="token punctuation">\</span>Bar</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Request</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Sessions</span> <span class="token keyword">extends</span> <span class="token class-name">Bar</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 初始化卡片内容</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$color</span> <span class="token operator">=</span> <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">color</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$dark35</span> <span class="token operator">=</span> <span class="token variable">$color</span><span class="token operator">-></span><span class="token function">dark35</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 卡片内容宽度</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">contentWidth</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token comment">// 标题</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Avg Sessions'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token comment">// 设置下拉选项</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">dropdown</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">            <span class="token string single-quoted-string">'7'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Last 7 Days'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'28'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Last 28 Days'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'30'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Last Month'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'365'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Last Year'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token comment">// 设置图表颜色</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">chartColors</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">            <span class="token variable">$dark35</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token variable">$dark35</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token variable">$color</span><span class="token operator">-></span><span class="token function">primary</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token variable">$dark35</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token variable">$dark35</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token variable">$dark35</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 处理请求</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@param</span> <span class="token class-name">Request</span> <span class="token parameter">$request</span></span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">mixed</span><span class="token punctuation">|</span><span class="token keyword">void</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">handle</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Request</span> <span class="token variable">$request</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">switch</span> <span class="token punctuation">(</span><span class="token variable">$request</span><span class="token operator">-></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'option'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token keyword">case</span> <span class="token string single-quoted-string">'7'</span><span class="token punctuation">:</span></span>
<span class="line">            <span class="token keyword">default</span><span class="token punctuation">:</span></span>
<span class="line">                <span class="token comment">// 卡片内容</span></span>
<span class="line">                <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">withContent</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'2.7k'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'+5.2%'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                <span class="token comment">// 图表数据</span></span>
<span class="line">                <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">withChart</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">                    <span class="token punctuation">[</span></span>
<span class="line">                        <span class="token string single-quoted-string">'name'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Sessions'</span><span class="token punctuation">,</span></span>
<span class="line">                        <span class="token string single-quoted-string">'data'</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token number">75</span><span class="token punctuation">,</span> <span class="token number">125</span><span class="token punctuation">,</span> <span class="token number">225</span><span class="token punctuation">,</span> <span class="token number">175</span><span class="token punctuation">,</span> <span class="token number">125</span><span class="token punctuation">,</span> <span class="token number">75</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">                    <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">                <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 设置图表数据.</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@param</span> <span class="token class-name"><span class="token keyword">array</span></span> <span class="token parameter">$data</span></span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> $this</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">withChart</span><span class="token punctuation">(</span><span class="token keyword type-hint">array</span> <span class="token variable">$data</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">chart</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">            <span class="token string single-quoted-string">'series'</span> <span class="token operator">=></span> <span class="token variable">$data</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 设置卡片内容.</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@param</span> <span class="token class-name"><span class="token keyword">string</span></span> <span class="token parameter">$title</span></span>
<span class="line">     * <span class="token keyword">@param</span> <span class="token class-name"><span class="token keyword">string</span></span> <span class="token parameter">$value</span></span>
<span class="line">     * <span class="token keyword">@param</span> <span class="token class-name"><span class="token keyword">string</span></span> <span class="token parameter">$style</span></span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> $this</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">withContent</span><span class="token punctuation">(</span><span class="token variable">$title</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">,</span> <span class="token variable">$style</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'success'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 根据选项显示</span></span>
<span class="line">        <span class="token variable">$label</span> <span class="token operator">=</span> <span class="token function">strtolower</span><span class="token punctuation">(</span></span>
<span class="line">            <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">dropdown</span><span class="token punctuation">[</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token property">option</span><span class="token punctuation">]</span> <span class="token operator">??</span> <span class="token string single-quoted-string">'last 7 days'</span></span>
<span class="line">        <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$minHeight</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'183px'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">content</span><span class="token punctuation">(</span></span>
<span class="line">            <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">HTML</span></span>
<span class="line"><span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"d-flex p-1 flex-column justify-content-between"</span> style<span class="token operator">=</span><span class="token string double-quoted-string">"padding-top: 0;width: 100%;height: 100%;min-height: <span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$minHeight</span><span class="token punctuation">}</span></span>"</span><span class="token operator">></span></span>
<span class="line">    <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"text-left"</span><span class="token operator">></span></span>
<span class="line">        <span class="token operator">&lt;</span>h1 <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"font-large-2 mt-2 mb-0"</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token variable">$title</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">></span></span>
<span class="line">        <span class="token operator">&lt;</span>h5 <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"font-medium-2"</span> style<span class="token operator">=</span><span class="token string double-quoted-string">"margin-top: 10px;"</span><span class="token operator">></span></span>
<span class="line">            <span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"text-<span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$style</span><span class="token punctuation">}</span></span>"</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token variable">$value</span><span class="token punctuation">}</span> <span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span></span>
<span class="line">            <span class="token operator">&lt;</span>span<span class="token operator">></span>vs <span class="token punctuation">{</span><span class="token variable">$label</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span></span>
<span class="line">        <span class="token operator">&lt;</span><span class="token operator">/</span>h5<span class="token operator">></span></span>
<span class="line">    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"></span>
<span class="line">    <span class="token operator">&lt;</span>a href<span class="token operator">=</span><span class="token string double-quoted-string">"#"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"btn btn-primary shadow waves-effect waves-light"</span><span class="token operator">></span>View Details <span class="token operator">&lt;</span>i <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"feather icon-chevrons-right"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>i<span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">></span></span>
<span class="line"><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"><span class="token constant">HTML</span></span>
<span class="line">        <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="多环形图卡片-round" tabindex="-1"><a class="header-anchor" href="#多环形图卡片-round"><span>多环形图卡片 (Round)</span></a></h2>
<p>柱状图卡片(<code v-pre>Dcat\Admin\Widgets\Metrics\Round</code>)是一个附带了多环形图的数据统计卡片，继承自基础卡片<code v-pre>Dcat\Admin\Widgets\Metrics\Card</code>。<br>
<img src="@source/dcat-admin-2x/assets/images/12fb7c3c-530e-46ac-a810-68b997326fc4-tAEmCWBMIM.png" alt=""></p>
<h3 id="示例-3" tabindex="-1"><a class="header-anchor" href="#示例-3"><span>示例</span></a></h3>
<p>具体示例与上述卡片的示例大同小异，具体可参考内置的<code v-pre>App\Admin\Metrics\Examples\ProductOrders</code>类，这里不再贴出。</p>
<h2 id="更多内置卡片" tabindex="-1"><a class="header-anchor" href="#更多内置卡片"><span>更多内置卡片</span></a></h2>
<p>系统还内置了<code v-pre>Dcat\Admin\Widgets\Metrics\RadialBar</code>、<code v-pre>Dcat\Admin\Widgets\Metrics\SingleRound</code>等卡片，由于用法与上述卡片雷同，这里不再重复贴出代码。</p>
<p><a href="http://103.39.211.179:8080/admin/components/metric-cards" target="_blank" rel="noopener noreferrer">点击我查看所有内置卡片在线演示</a></p>
<h2 id="自定义图表卡片" tabindex="-1"><a class="header-anchor" href="#自定义图表卡片"><span>自定义图表卡片</span></a></h2>
<p>如需自定义卡片，可参考上述内置图表的代码。</p>
</div></template>


